<template>
	<div class="system-num-container">
		<el-row :gutter="20">
			<el-col :span="6">
				<el-input v-model="filterText" style="width: 15vw; margin: 5px" size="mini" placeholder="查询" />
				<el-scrollbar :style="{ 'height': screenHeight - 220 + 'px', }">
					<el-tree 
						default-expand-all
						:data="treeData"
						node-key="id"
						ref="refTree"
						@node-click="onNodeClick"
						:filter-node-method="filterNode"
						highlight-current
						:expand-on-click-node="false"
					/>
				</el-scrollbar>
			</el-col>
			<el-col :span="18">
				<el-card shadow="hover" body-style="padding:8px; ">
				<el-button style="float: left; margin: 5px" type="primary" size="mini" @click="onAdd()" plain>新增</el-button>
				<el-table
					ref="multipleTable" border
					:data="tableData"
					:default-sort="{ prop: 'name', order: 'descending' }"
					:row-style="{ height: '0' }"
					:cell-style="{ padding: '5' }"
					style="width: 100%"
				>
					<el-table-column align="center" label="序号" type="index" width="50"> </el-table-column>
					<el-table-column align="center" sortable prop="areaCode" label="区划编号" width="180" show-overflow-tooltip />
					<el-table-column align="center" sortable prop="organName" label="单位名称" width="240" show-overflow-tooltip />
					<el-table-column align="center" prop="numberName" sortable label="编号类型" width="120" show-overflow-tooltip />
					<el-table-column align="center" prop="inc" sortable label="自增位数" width="120" show-overflow-tooltip />
					<el-table-column align="center" property="dateForamt" sortable label="日期格式" width="120" show-overflow-tooltip />
					<el-table-column align="center" property="numberFormat" sortable label="编号格式" width="240" show-overflow-tooltip />
					<el-table-column align="center" property="currentNumber" sortable label="当前编号" width="320" show-overflow-tooltip />
					<el-table-column align="center" property="remark" sortable label="备注" show-overflow-tooltip />
					<el-table-column align="center" label="操作" width="200" fixed="right">
						<template #default="scope">
							<el-button type="primary" @click="onNumberInfo(scope.row)" plain size="mini">修改</el-button>
							<el-button type="danger" @click="onDeleteInfo(scope.$index, scope.row)" plain size="mini">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-card>
			</el-col>
		</el-row>
		
		<Edit ref="editRef" @reload="init" />
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive,watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import Edit from '/@/views/system/num/component/edit.vue';
import { queryOrgans } from '/@/api/organ/index';
import { queryNumber, deleteNumber } from '/@/api/number/index';
export default {
	name: 'systemNum',
	components: { Edit },
	setup() {
		const editRef = ref();
		const state = reactive({
			tableData: [],
			filterText:"",
			treeData: [{}],
			currentNode:null,
		});
		const onNumberInfo = (row) => {
			editRef.value.openDialog({
				data: row,
				isAdd: false,
			});
		};
		queryOrgans().then((res: any) => {
			state.treeData = res.data.tree;
		});
		function filterNode(value: String, data: any) {
			if (!value) return true;
			return data.label.includes(value);
		}
		function onNodeClick(node: any) {
			state.currentNode = node;
			init()
		}
		const refTree = ref();
		watch(
			() => state.filterText,
			(val) => {
				refTree.value.filter(val);
			}
		);
		const onDeleteInfo = async (index, row) => {
			await ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					deleteNumber({
						id: row.id,
					}).then((res) => {
						if (res.success) {
							state.tableData.splice(index, 1);
							ElMessage.success('删除成功');
						}
					});
				})
				.catch(() => {});
		};
		function onAdd() {
			editRef.value.openDialog({
				isAdd: true,
			});
		}
		async function init() {
			state.tableData = [];
			await queryNumber({organid:state.currentNode?.id||0}).then((res) => {
				if (res.success) {
					state.tableData = res.data;
				}
			});
		}
		init();
		return {
			editRef,
			onDeleteInfo,
			onNumberInfo,
			onAdd,
			init,
			filterNode,
			onNodeClick,
			...toRefs(state),
		};
	},
};
</script>
